


<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:im用户
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->


<template>
	<view style="background-image: url(../../static/im/imbj_2.png);
	 background-size:cover;
	 background-repeat:no-repeat;
		width: 100%;
		height: 100%;
		color: #FFFFFF;" class="im-user">
		<view class="head shadow">
			<view class="return" @click="back"><image src="../../static/img/im/im-chat-h1.png" mode="widthFix"></image></view>
			<view class="title_wrap"><text class="uni-title">用户信息</text></view>
			<view @click="showDialog1" class="seach" style="margin-right: 20rpx;"><image src="../../static/img/im/addFriend.png"></image></view> 
		</view> 
		<view class="uni-padding-wrap">
			<view class="avatar">
				<view class="uni-flex" @click="showPic">
					<image :src="chatUserAvatar" style="background: url(../../static/img/im/chat_icon.png) no-repeat;background-size: cover;" mode="widthFix"></image>
				</view>
				<view class="uni-text-gray uni-center  uni-common-mt">{{info.signature}}</view>
			</view>
			<view class="uni-flex uni-row uni-common-mt" style="border-radius:10rpx 10rpx 0 0;">
				<view class="text desc">
					<view class="uni-flex">
						<view>
							<uni-icons type="paperplane" color="#fff" size="25" />
						</view>
						<view class="text">昵称</view>
					</view>
				</view>
				<view class="info-text">{{info.nickname}}</view>
			</view>
			
			<view class="uni-flex uni-row">
				<view class="text desc">
					<view class="uni-flex">
						<view>
							<uni-icons type="paperplane" color="#fff" size="25" />
						</view>
						<view class="text">用户名</view>
					</view>
				</view>
				<view class="info-text">{{info.username}}</view>
			</view>
			
			<view class="uni-flex uni-row" style="border-radius: 0 0 10rpx 10rpx;">
				<view class="text desc">
					<view class="uni-flex">
						<view>
							<uni-icons type="paperplane" color="#fff" size="25" />
						</view>
						<view class="text">性别</view>
					</view>
				</view>
				<view class="info-text">{{gender}}</view>
			</view>
		</view>
		
		<view class="uni-flex btns">
			<button type="primary" style="background-color: rgba(255,255,255,0.05);" plain="true" v-if="info.isFriend == false && info.isInBlackList == false" @click="showDialog1">加好友</button>
			 <button type="primary" style="background-color: rgba(255,255,255,0.05);" plain="true" v-if="info.isFriend == true" @click="delFriend">删除好友</button> 
			<button type="primary" @click="skip">发送消息</button>
		</view>

		<uni-dialog title="添加好友" :show="show1" v-on:closeDialog="closeDialog1">
			<view slot="content">
				<view class="dialog-content1">
					<input class="uni-input" :value="friendUsername" placeholder="请输入用户帐号" />
					<input class="uni-input" v-model="friendReason" placeholder="请输入原因" />
				</view> 
			</view>
			<view slot="btns">
				<view class="dialog-btns">
					<view><button type="primary" @tap="closeDialog1">关闭</button></view>
					<view><button type="primary" @tap="confirm1" formType="submit" style="color:#3688FF;">发送好友邀请</button></view>
				</view>
			</view>
		</uni-dialog>
		
	</view>
</template>

<script>
	import uniDialog from '@/components/im-chat/uni-dialog.vue'
	
	export default {
		components: {
			uniDialog
		},
		onLoad(option) {
			// 设置标题
			if (!option.fromUser) {
				uni.showModal({
					title: '错误',
					content: '缺少用户信息',
					showCancel: false,
					cancelText: '',
					confirmText: '好的'
				});
				return;
			}
			uni.setNavigationBarTitle({
				title: option.title
			});
			let chatUsername = option.fromUser;
			let param = {
				"username": option.fromUser
			};
			this.jpushIM.getUserInfo({"username":chatUsername}, (res) => {
				if(!res.data){
					uni.showModal({  
						title: '提示',  
						content: '获取用户信息失败!',  
						showCancel: false,
						success: function(res) {  
							uni.navigateBack();
						}
					});
					return;
				}
				console.log(res.data);
				res.data.avatar = res.data.avatar ? res.data.avatar : "../../static/img/im/chat_icon.png";
				this.info = res.data;
				this.chatUserAvatar = JSON.parse(res.data.extras).head_img?JSON.parse(res.data.extras).head_img:res.data.avatar;
				console.log(this.chatUserAvatar)
			})
		},
		data() {
			return {
				info: {},
				chatUserAvatar:"",
				show1: false,
				friendReason: "交个朋友吧!",
			}
		},
		computed:{
			gender:function(){
				return this.imUtils.getGender(this.info.gender);
			},
			friendUsername:function(){
				return this.info.username;
			},
		},
		methods:{
			skip: function(index) {
				let item = this.info;
				let title = item.nickname ? item.nickname : item.nickname;
				this.jpushIM.skipToSingleChat(item.username, (res) => {
					uni.navigateTo({
						url: './im-chat?title=' + title + '&fromUser=' + item.username
					});
				}, (err) => {
					uni.showToast({
						title: "创建 [" + item.username + "] 会话失败:" + err.errorMsg,
						icon: "none"
					});
				})
			},
			// 预览图片
			showPic(){
				uni.previewImage({
					indicator:"none",
					current:0,
					urls:[this.chatUserAvatar]
				});
			},
			back(){
				// 返回
				uni.navigateBack({
					delta: 1
				});
			},
			showDialog1: function(index) {
				this.show1 = true;
			},
			closeDialog1: function() {
				this.show1 = false;
			},
			confirm1() {
				console.log("========addUsers========");
				// 添加好友调接口
				let params = {
					"username": this.friendUsername,
					"reason": this.friendReason
				}
				uni.showLoading();
				// #ifdef APP-PLUS
				this.jpushIM.sendInvitationRequest(params, (res) => {
					uni.hideLoading();
					console.log(res);
					if (res.errorCode == 0) {
						uni.showToast({
							title: "发送成功",
							icon: 'none'
						});
						this.closeDialog1(); // 关闭dialog
					} else {
						uni.showModal({
							title: '操作失败',
							content: "原因：" + res.errorMsg,
							showCancel: false,
							cancelText: '',
							confirmText: '关闭'
						});
					}
				})
				// #endif
			},
			// 删除好友
			delFriend(){
				let params = {
					"username": this.info.username
				};
				// #ifdef APP-PLUS
				this.jpushIM.removeFromFriendList(params, (res) => {
					if (res.errorCode == 0) {
						uni.showToast({
							title: res.errorMsg,
							icon: 'none'
						});
						// this.getList();  
						// this.listData[index].splice(index2, 1);
					} else {
						uni.showModal({
							title: '操作失败',
							content: "原因：" + res.errorMsg,
							showCancel: false,
							cancelText: '',
							confirmText: '关闭'
						});
					}
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		position: relative;
		//#ifdef APP-PLUS
		padding-top: var(--status-bar-height);
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.1);
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
	}
	.shadow {
		box-shadow: 0 1px 6px rgba(255, 255, 255, 0.1);
	}
	.return{
		flex: 1;
		display: flex;
		flex-direction: row;
		position: relative;
		left: 0rpx;
		justify-content: flex-end;
		align-items: center;
		image {
			display: inline-block;
			width: 32rpx;
			height: 21rpx;
			margin-left: 21rpx;
		}
	}
	.title_wrap {
		flex: 11;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.uni-title {
		margin-left: -30rpx;
	}
	.im-user .avatar {
		padding-top: 60rpx;;
	}
	.im-user .avatar img,
	.im-user .avatar image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}
	.im-user .avatar .uni-flex{
		-webkit-justify-content: center;
		justify-content: center;
	}
	.im-user .uni-row {
		background-color: rgba(255,255,255,0.08);
		position: relative;
		/* height: 30rpx; */
		/* line-height: 30rpx; */
		padding: 24rpx 0;
		width: 100%;
	}
	
	.im-user .uni-row:after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 3rpx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: rgba(255,255,255,0.2);
	}
	
	.im-user .uni-row:last-child::after{
		background-color: rgba(255,255,255,0);
	}

	.im-user .uni-row .desc {
		width: 200rpx;
	}

	.im-user .uni-row .desc .text {
		margin-left: 10rpx;
		line-height: 2.2;
	}

	.im-user .uni-row .info-text {
		-webkit-flex: 1;
		flex: 1;
		line-height: 2.2;
	}
	.im-user .btns{
		-webkit-justify-content: center;
		justify-content: center; 
		margin-top: 30rpx;
		padding: 25rpx 0;
	}
	
	/* 模态对话框 */
	.dialog-btns {
		display: flex;
		width: 100%;
		padding: 10px 0;
		flex-wrap: nowrap;
	}
	
	.dialog-btns view {
		width: 100%;
		border-right: 1px solid #F5F6F8;
	}
	
	.dialog-btns view:last-child {
		border: 0;
	}
	
	.dialog-btns button {
		width: 100%;
		padding: 0;
		text-align: center;
		background: none;
		border: none;
		box-shadow: none;
		height: 25px;
		font-size: 14px;
		color: #888888;
		line-height: 25px;
		border-radius: 0;
	}
	
	.dialog-btns button:after {
		width: 0;
		height: 0;
		border: 0;
	}
	
	.dialog-btns .button-hover {
		background: none;
		color: #3688FF;
	}
	
	.dialog-content1 {
		padding: 15rpx;
		background: rgba(255,255,255,1);
		color: #000000;
	}
	
	.dialog-content1 .uni-input {
		margin-bottom: 15rpx;
	}
	
	.dialog-content1 .uni-textarea {
		padding: 15rpx;
		box-sizing: border-box;
	}
</style>
